<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>日志管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" type="text/css" href="/resources/zTree/plugin/css/index.css">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>
	<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.excheck.js"></script>
</head>
<body class="childrenBody">
	<!-- 查询开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  	<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form"  id="searchFrm">
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">角色名字</label>
	      <div class="layui-input-inline">
	        <input type="text" name="name"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">角色备注</label>
	      <div class="layui-input-inline">
	        <input type="text" name="remark"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	  </div>
	  
	  <div class="layui-form-item" style="text-align: center;">
	    <div class="layui-input-block">
	      <button type="button" class="layui-btn" id="doSearch">查询</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
	<!-- 查询结束 -->
	
	
	<div id="add" style="display: none;" lay-filter="add">
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="add">添加</button>
	</div>
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="notice" lay-filter="notice"></table>
	<div id="toolBar" style="display: none;" lay-filter="toolBar">
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="update">修改</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="selectPermission">分配角色</button>
	</div>
	<!-- 数据表格结束 -->
	
	
	<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">角色名称</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		        <input type="text" name="name" id="title" lay-verify="required" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">角色备注</label>
		      <div class="layui-input-inline">
		        <input type="text" name="remark" id="title" lay-verify="required" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		  <div class="layui-inline">
		      <label class="layui-form-label">是否可用</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="available" value="1" title="可用">
      			<input type="radio" name="available" value="0" title="不可用">
		      </div>
		    </div>
		 
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			<button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
	</div>
	<!--分配角色 -->
	<div id="selectPermissionDiv" style="display: none;margin: 10px">
		<div id="permissionTree" class="ztree"></div>
		<div style="text-align: center;">
			<button type="button" class="layui-btn" id="saveRolePermission">保存</button>
		</div>
	</div>
	
	<script src="/resources/layui/layui.js" charset="utf-8"></script>
	
	<script type="text/javascript">
	
	
		layui.use([ 'element', 'layer', 'jquery', 'layedit','form', 'table','laydate' ],
				function() {
					var element = layui.element;
					var layer = layui.layer;
					var $ = layui.jquery;
					var laydate = layui.laydate;
					var form = layui.form;
					var table = layui.table;
					var laydate=layui.laydate;
					var layedit=layui.layedit;
					//渲染时间选择器
					
					var tableIns=table.render({
					    elem: '#notice'  //指渲染的目标  
					    ,url:'/role/loadAllRole'//请求地址
					    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
					    ,height:'full-200'//设置高度    
					 	,page:true//开启分页
					 	,title:"用户列表"  //设置导出execl时的标题
					 	,toolbar:'#add'//设置显示工具条并设置表头左边的工具类
					 	,defaultToolbar:['filter','print']  //设置默认工具条的显示和顺序
					    ,cols: [ [
					       {type:'checkbox'}
					      ,{field:'id',  title: 'ID', sort: true,align:"center"}
					      ,{field:'name',  title: '名字',align:"center"}
					      ,{field:'remark',  title: '拥有角色',align:"center"}
					      ,{field:'available',  title: '是否可用',width:100,align:"center",templet:function(d){
					    	  return d.available==0?"<font color=red>不可用</font>":"<font color=blue>可用</font>";
					      }}
					      ,{width:200, title: '操作', toolbar:"#toolBar",align:"center",fixed:"right"}
					    ] ]
					  });
					
					  //查询
					  $("#doSearch").click(function(){
						  var params=$("#searchFrm").serialize();
						  tableIns.reload({url: '/role/loadAllRole?'+params});
					  });
					//监听行工具栏的事件
					  table.on('tool(notice)', function(obj){
						  var data = obj.data; //获得当前行数据
						    switch(obj.event){
						      case 'delete':
						    	  layer.confirm('是否删除这个客户？',{icon:3, title:'提示信息'},function(index){
						                 $.post("/role/deleteRole",{
						                     id : data.id  //将需要删除的id作为参数传入
						                 },function(data){
						                	tableIns.reload();
						                	layer.msg(data.msg);
						                    layer.close(index);
						                 	})
						            	});
						      			break;
						      			
						      case 'update':
						    	 	toUpdate(data);
						      		break;
						      		
						      case "selectPermission":
						    	  openSelectPermission(data);
						    	  break;
						    };
						}); 
					  
						 
						
					  var url;//提交的url
					  var index;//弹出层的索引
					 
					  table.on('toolbar(notice)', function(obj){
						    switch(obj.event){
						      case 'add':
						        toAdd();
						      break;
						      case 'batchDelete':
						        layer.msg('批量删除');
						        var checkStatus = table.checkStatus('test');//test就是<table id="test">
								layer.msg(JSON.stringify(checkStatus.data));
						      break;
						    };
						  });
					  
					  	//修改
					  	var up;
						function toUpdate(data){
							url="/role/updateRole";
							index=layer.open({
								type:1,//弹出层的类型
								title:'修改用户',
								content:$("#dataFrmContent"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									up = layedit.build("content");
				                    form.val('dataFrm',data);
				                    $('[name=available]').each(function(i,item){
										if($(item).val()==data.available){
											$(item).prop('checked',true);
											layui.use('form',function(){
												
												form.render();
											});
										}
									});
				                    form.render();
								}
							})
						}
					  
						function toAdd(){
							url="/role/addRole";
							index=layer.open({
								type:1,//弹出层的类型
								title:'添加用户',
								content:$("#dataFrmContent"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									up = layedit.build("content");
									$("#dataFrm")[0].reset();
								}
							})
						}
					  
						//保存
						form.on("submit(doSubmit)",function(obj){
							obj.field.content=layedit.getContent(up);
							console.log(obj.field.content);
							$.post(url,obj.field,function(result){
								if(result.code>0){
									layer.msg(result.msg);
								}
								tableIns.reload();
								layer.close(index);
							})
							return false;//禁用同步提交方式
						});
						

						//分配角色
						function openSelectPermission(data){
							index=layer.open({
								type:1,//弹出层的类型
								title:'添加用户',
								content:$("#selectPermissionDiv"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									initRolePermissionTree(data.id);
								}
							})
							
						}
						
						
						
				});
		
		var setting = {
				data: {
					simpleData: {
						enable: true
					}
				},
				check: {
					enable: true
				}
		};
		var rid;
		//初始化树
		function initRolePermissionTree(id){
			rid=id;
			$.post("/role/loadRolePermisisonTreeJosn",{id:id},function(zNodes){
				$.fn.zTree.init($("#permissionTree"), setting, zNodes);
			});
			
			
		}
		//保存角色和权限的关系
		$("#saveRolePermission").click(function(){
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			var nodes = treeObj.getCheckedNodes(true);
			var params="id="+rid;
			$.each(nodes,function(index,obj){
				params+="&ids="+obj.id;
			});
			//保存
			$.post("/role/saveRolePermisison",params,function(obj){
				window.parent.layer.msg(obj.msg);
			});
		})
	</script>
</body>
</html>